<template>
  <div class="yingyong">
    <div class="yingyong-add">
      <div class="add">
        <div class="add-button">
          <img src="@/assets/images/console/group.png" @click="dialogFormVisible = true" alt="" />
        </div>
        <div class="add-text">
          创建应用
        </div>
        <div class="add-info">
          申请应用需1-3个工作日审核，审核通过返回应用App Key，在对接接口时需要应用App Key授权认证。
        </div>
      </div>
    </div>
    <div class="yingyong-list">
      <div class="list-name">我的应用</div>
      <div class="list">
        <div v-if="applyShow" class="swiper-container" id="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" id="swiper-slide" v-for="(item, index) of applyData" :key="index">
              <div class="list-item">
                <i class="item-del el-icon-delete" @click="delClick(item.app_id)"></i>
                <img @click="cancel(item.app_id)" v-if="item.app_status == 1" class="cancel" src="@/assets/images/console/cancellation.png" alt="Img" />
                <div class="item-top">
                  <div class="item-state item1" v-if="item.app_status == 0">待审核</div>
                  <div class="item-state" v-if="item.app_status == 1">审核成功</div>
                  <div class="item-state item2" v-if="item.app_status == 2">审核失败</div>
                  <div class="item-state item3" v-if="item.app_status == 3">已注销</div>
                  <div class="item-time">{{ item.create_time }}</div>
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-down">
                  <div class="down-item">
                    <div class="down-item-name">回调url:</div>
                    <div class="down-item-info">{{ item.notify_url }}</div>
                  </div>
                  <div class="down-item">
                    <div class="down-item-name">公<span style="  color: transparent;">url</span>钥:</div>
                    <div class="down-item-info">{{ item.developer_id }}</div>
                  </div>
                  <div class="down-item">
                    <div class="down-item-name">私<span style="  color: transparent;">url</span>钥:</div>
                    <div class="down-item-info">
                      {{ item.app_secret }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="nodata">
          <img src="@/assets/images/console/nodata.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 添加应用 -->
    <el-dialog title="创建应用" :visible.sync="dialogFormVisible" id="dialog-add" style="margin-top:15vh;">
      <el-form :model="applyList" ref="applyList" :rules="rules">
        <el-form-item label="应用名称" :label-width="formLabelWidth">
          <el-input v-model="applyList.name" autocomplete="off" placeholder="请填写应用名称"></el-input>
        </el-form-item>
        <el-form-item label="回调地址" :label-width="formLabelWidth">
          <el-input type="url" v-model="applyList.notify_url" autocomplete="off" placeholder="请填写回调地址,必须以http和https开头"></el-input>
        </el-form-item>
        <el-form-item label="合同地址" :label-width="formLabelWidth">
          <el-input type="url" v-model="applyList.contract_notify_url" autocomplete="off" placeholder="请填写合同地址,必须以http和https开头"></el-input>
        </el-form-item>
        <el-form-item label="应用描述" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="5" v-model="applyList.description" placeholder="请描述应用"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogSubmit">提交</el-button>
      </div>
    </el-dialog>

    <!-- 删除的弹框 -->
    <el-dialog title="删除" :visible.sync="dialogDel" width="33%" id="del-dialog">
      <span>您确定删除此条应用吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDel = false">取消</el-button>
        <el-button type="primary" @click="dialogDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 注销的弹框 -->
    <el-dialog title="注销" :visible.sync="dialogCancellation" width="33%" id="del-dialog">
      <span>您确定要注销此条应用吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCancellation = false">取消</el-button>
        <el-button type="primary" @click="dialogCancel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Swiper from 'swiper'
import '../../../../../../node_modules/swiper/css/swiper.min.css'
import { mapState } from 'vuex'
export default {
  data() {
    var validateHttp = (rule, value, callback) => {
      // 验证密码
      const reg = /(http|https):\/\/([\w.]+\/?)\S*/
      if (value === '') {
        callback(new Error('请输入对应网址'))
      } else if (!reg.test(value)) {
        console.log(value)
        callback(new Error('请输入正确的网址'))
      }
      callback()
    }

    return {
      rules: {
        http: [{ validator: validateHttp, trigger: 'blur' }]
      },
      dialogFormVisible: false, //添加应用
      dialogDel: false, //删除应用
      applyList: {
        name: '',
        notify_url: '',
        contract_notify_url: '',
        description: ''
      },
      formLabelWidth: '120px',
      applyData: {},
      applyShow: true,
      add_id: '',
      cancelShow: true,
      dialogCancellation: false
    }
  },
  mounted() {
    this.getApplyData() // 调取应用接口
    new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 10,
      freeMode: true,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    })
  },
  computed: {
    ...mapState({
      user_id: modules => modules.login.loginList.developer_id,
      token: modules => modules.login.loginList.token
    })
  },
  methods: {
    // 获取应用列表
    async getApplyData() {
      const params = {
        developer_id: this.user_id
      }
      const nums = JSON.stringify(params)
      console.log(nums)
      const data = await this.http.post(`/web/app/app-list?access_token=${this.token}`, nums)
      console.log(data)
      if (data.data) {
        this.applyData = data.data
        this.applyShow = true
      } else {
        this.applyShow = false
      }
    },
    // 增加应用
    async dialogSubmit() {
      const params = {
        contract_notify_url: this.applyList.contract_notify_url,
        description: this.applyList.description,
        developer_id: this.user_id,
        name: this.applyList.name,
        notify_url: this.applyList.notify_url
      }
      console.log(params)
      const data = await this.http.post(`/web/app/add-app?access_token=${this.token}`, params)
      console.log(data)
      if (data.result_code == '0') {
        this.$message({
          message: data.result_message,
          type: 'success'
        })
        this.dialogFormVisible = false
        this.applyList = {}
        this.getApplyData() // 调取应用接口
      } else if (data.result_code == '4003') {
        this.$message({
          message: data.result_message,
          type: 'error'
        })
      }
    },
    // 删除应用
    delClick(id) {
      this.dialogDel = true
      console.log(id)
      this.add_id = id
    },
    async dialogDelete() {
      const params = {
        developer_id: this.user_id,
        app_id: this.add_id
      }
      const nums = JSON.stringify(params)
      const data = await this.http.post(`/web/app/delete-app?access_token=${this.token}`, nums)
      console.log(data)
      if (data.result_code == '0') {
        this.$message({
          message: data.result_message,
          type: 'success'
        })
        this.dialogDel = false
        this.getApplyData() // 调取应用接口
      } else if (data.result_code == '4003') {
        this.$message({
          message: data.result_message,
          type: 'error'
        })
        this.dialogDel = false
      }
    },
    // 注销
    async cancel(red) {
      console.log(red)
      this.add_id = red
      this.dialogCancellation = true
    },
    async dialogCancel() {
      const params = {
        developer_id: this.user_id,
        app_id: this.add_id
      }
      const nums = JSON.stringify(params)
      const data = await this.http.post(`/web/app/logout-app?access_token=${this.token}`, nums)
      console.log(data)
      if (data.result_code == '0') {
        this.$message({
          message: data.result_message,
          type: 'success'
        })
        this.cancelShow = false
        this.dialogCancellation = false
        this.getApplyData() // 调取应用接口
      } else if (data.result_code == '4003') {
        this.$message({
          message: data.result_message,
          type: 'error'
        })
        this.dialogCancellation = false
      }
    }
  }
}
</script>
<style scoped lang="scss">
.yingyong {
  width: 100%;
  height: 100%;

  .yingyong-add {
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    padding: 40px 0;
    padding-left: 60px;
    border-bottom: 2px solid #bfbfbfff;
    .add {
      width: 304px;
      height: 280px;
      background: rgba(255, 255, 255, 1);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 40px;
      .add-button {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .add-text {
        font-size: 18px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        letter-spacing: 1px;
        margin-bottom: 10px;
      }
      .add-info {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
        letter-spacing: 1px;
      }
    }
  }
  .yingyong-list {
    height: 100%;
    height: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    .list-name {
      width: 100%;
      box-sizing: border-box;
      height: 77px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(108, 108, 108, 1);
      letter-spacing: 1px;
    }
    .list {
      font-size: 18px;
      width: 100%;
      height: 100%;
      padding: 20px;
      .nodata {
        margin: 20px auto 0;
        width: 300px;
        height: 300px;
        img {
          width: 100%;
        }
      }
      .list-item {
        position: relative;
        width: 304px;
        height: 280px;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        padding: 40px 21px 0 30px;
        margin-right: 20px;
        .item1 {
          border: 1px solid #909399 !important;
          background: #f4f4f5 !important;
          color: #909399 !important;
          width: 80px !important;
        }
        .item2 {
          border: 1px solid #ffc2c2 !important;
          background: #ffe9e9 !important;
          color: red !important;
        }
        .item3 {
          border: 1px solid #333 !important;
          background: #fff !important;
          color: #333 !important;
        }
        .cancel {
          position: absolute;
          top: 2%;
          left: 2%;
          width: 22px;
          cursor: pointer;
        }
        .item-top {
          display: flex;
          align-items: center;
          margin-bottom: 30px;
          .item-state {
            width: 90px;
            height: 28px;
            background: rgba(233, 244, 233, 1);
            border-radius: 14px;
            border: 1px solid rgba(35, 183, 105, 1);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            font-weight: 500;
            color: rgba(35, 183, 105, 1);
          }
          .item-time {
            height: 12px;
            font-size: 12px;
            font-family: NotoSansHans-Regular, NotoSansHans;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            align-self: flex-end;
          }
        }
        .item-name {
          margin-bottom: 30px;
        }
        .item-down {
          .down-item {
            margin-bottom: 30px;
            display: flex;
            font-size: 15px;
            color: #999999;
            .down-item-name {
              letter-spacing: 1px;
              width: 80px;
              text-align: right;
              margin-right: 15px;
            }
            .down-item-info {
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .down-item:nth-child(3) {
            margin-bottom: 0;
          }
        }
        .item-del {
          display: block;
          position: absolute;
          right: 10px;
          top: 10px;
          color: #d2d2d2;
          font-size: 22px;
          cursor: pointer;
        }
      }
    }
  }

  //删除应用
  /deep/#del-dialog {
    margin: 0 auto;
    margin-top: 20vh;
    .el-dialog__headerbtn {
      top: 11px;
      .el-icon-close {
        font-size: 30px;
        font-weight: 600;
        color: #999999;
      }
    }
    .el-dialog__header {
      height: 60px;
    }
    .el-dialog__body {
      padding: 10%;
      display: flex;
      justify-content: center;
      font-size: 18px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      letter-spacing: 1px;
    }
    .el-dialog__footer {
      padding-bottom: 45px;
      text-align: center;
      .el-button {
        border-radius: 6px;
      }
      .el-button:nth-child(2) {
        margin-left: 40px;
      }
      .el-button--default {
        background: rgba(35, 183, 105, 1);
        color: rgba(255, 255, 255, 1);
      }
      .el-button--primary {
        background: rgba(255, 255, 255, 1);
        color: rgba(35, 183, 105, 1);
        border: 1px solid rgba(35, 183, 105, 1);
      }
    }
  }
  // 添加应用
  /deep/#dialog-add {
    .el-dialog {
      width: 34%;

      // input textarea的公共样式 定义一个混合
      @mixin common {
        background: rgba(235, 248, 236, 1);
        border-radius: 6px;
        border: 1px solid rgba(35, 183, 105, 1);
        font-size: 18px;
        // color: rgba(212, 209, 209, 1);
        letter-spacing: 1px;
      }
      .el-dialog__header {
        .el-dialog__headerbtn {
          top: 11px;
          .el-icon-close {
            font-size: 30px;
            font-weight: 600;
            color: #999999;
          }
        }
      }
      .el-dialog__body {
        padding-bottom: 20px;
        .el-form-item {
          .el-form-item__label {
            font-size: 18px;
            color: rgba(102, 102, 102, 1);
            letter-spacing: 1px;
          }
          .el-input {
            width: 80%;
            input {
              @include common;
            }
          }
          .el-textarea {
            width: 80%;
            textarea {
              @include common;
            }
          }
        }
      }
      .el-dialog__footer {
        text-align: center;
      }
    }
  }
}
</style>
